import React, { Component } from 'react';
import {
    View,
    ScrollView,
    RefreshControl
} from 'react-native';
import ListTab from "../components/ListTab/index";
import CourseList from "../components/CourseList/index";

import commonStyles from "../styles/commonStyles";
import Loading from "../components/Loading/index";
import ListModel from "../models/List";
const listModel = new ListModel()
export default class ListPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            fieldData: [],
            courseData: {},
            curIdx: "all",
            isRefreshing: false,
            isLoading: false
        };
    }
    
    getCourseField () {
        listModel.getCourseFields().then(res => {
            this.setState({
                fieldData: [{field_name: "全部课程", field: "all"}].concat(res.result)
            })
        })
    }
    getCourseList () {
        this.setState({
            isLoading: true
        })
        listModel.getCourses(this.state.curIdx).then(res=> {
            this.state.courseData[this.state.curIdx] = res.result
            this.setState({
                courseData: this.state.courseData,
                isLoading: false
            }, () => {
                
            console.log(this.state.courseData)
            })
            if(this.state.isRefreshing){
                this.setState({
                    isRefreshing: false
                })
            }
        })
    }
    componentDidMount(){
        this.getCourseField()
        this.getCourseList()
    }

    onTabClick(data){
        this.setState({
            curIdx: data.field
        }, () => !this.state.courseData[data.field] && this.getCourseList())
    }

    onPageRefresh () {
        console.log(333)
        if(this.state.isRefreshing){
            return
        }
        this.setState({
            courseData: {},
            isRefreshing: true
        }, () => this.getCourseList())
    }
    render() {
        const {curIdx, fieldData, courseData, isRefreshing, isLoading} = this.state;
        const {navigation} = this.props;
        return (
            <View style={commonStyles.tabContainer}>
                <ListTab curIdx={curIdx} fieldData={fieldData} onTabClick={this.onTabClick.bind(this)}/>
                <View style={commonStyles.listScrollerView}>
                    <ScrollView
                        automaticallyAdjustContentInsets={false}
                        showsVerticalScrollIndicator={false}
                        contentContainerStyle={{
                            paddingBottom: 10
                        }}
                        refreshControl={
                            <RefreshControl
                                refreshing={isRefreshing}
                                onRefresh={this.onPageRefresh.bind(this)}
                                title="加载中..."
                                titleColor="#666666"
                                tintColor="#666666"
                            />
                        }
                    >
                        <View style={commonStyles.courseDataPD}>
                            {
                                isLoading ? 
                                <Loading/>
                                 : courseData[curIdx] &&   
                                <CourseList
                                    coursesData={courseData[curIdx]}
                                    navigation={navigation}
                                />
                            }
                        </View>
                    </ScrollView>
                </View>
                
            </View>
        );
    }
    
}

